<template>
  <q-card class="card q-pa-sm">
    <q-card-section class="row fal">
      <div class="col-4 text-weight-bolder" style="font-size:1.4rem">Parent Equipment</div>
      <i>Assign this equipment to the new created equipment</i>
    </q-card-section>

    <q-card-section class="q-gutter-md row ">
            <q-item-label class="col-2 fal" >Stock Code :</q-item-label>
            <q-input v-model="stockCode" class="col-3" filled :dense="true" ></q-input>
            
            <q-item-label class="col-2 fal" >Serial No :</q-item-label>
            <q-input v-model="serialNo" class="col-3" filled :dense="true" ></q-input>        
    </q-card-section>

    <q-card-actions align="center">
      <q-btn class="grey-btn" @click="getParentEq">Search</q-btn>
    </q-card-actions>
    
    <q-card-section class="parent-code row">
        <q-item-label class="col-6" style="font-size: 1.2rem;font-weight: bold;">Stock Code : {{  }}</q-item-label>
        <q-item-label class="col-6" style="font-size: 1.2rem;font-weight: bold;">Serial No : {{  }}</q-item-label>
    </q-card-section>
  </q-card>
</template>

<script setup scoped lang="ts">
/* import { searchParent } from 'src/services/partsService';
 */import { ref } from 'vue';

const stockCode = ref('stockCode')
const serialNo = ref('serialNo')
async function getParentEq(){
/*     await searchParent(stockCode.value, serialNo.value) */
console.log('getParentEq');

}
</script>

<style>


.parent-code{
    justify-content:space-evenly;

}

.card{
    margin-bottom: 10px;
}


</style>